<template>
	<view class="container">
		<view class="search-bar">
			<input type="text" v-model="description" placeholder="请输入搜索内容" @input="onSearchInput" />
			<button @click="onSearchClick" :class="{ active: isActive }">搜索</button>
		</view>
		<view class="results" v-if="results.length > 0">
			<view>已为您搜索到{{ results.length }}条结果</view>
			<view class="searchbody">
				<view class="cate-lv2" v-for="(item, index) in results" :key="index">
					<view class="cont" @click="gotoDetail(item)">
						<view class="img">
							<image :src="item.imageURL" class="left" />
						</view>
						<view class="right">
							<view class="right1">{{ item.description }}</view>
							<view class="right2">￥{{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="no-results">没有找到相关结果</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			description: '',
			results: [],
			isActive: false // 新增属性，用于跟踪按钮点击状态
		};
	},
	methods: {
		onSearchInput(event) {
			this.description = event.target.value;
		},
		async onSearchClick() {
			if (!this.description.trim()) {
				this.results = [];
				return;
			}
			
			try {
				const res = await uni.$http.get('/wx/search', { description: this.description });
				this.results = res.data.data || [];
			} catch (err) {
				console.error(err);
				this.results = [];
			} finally {
				this.isActive = true; // 点击时激活按钮样式
				setTimeout(() => {
					this.isActive = false; // 稍后重置样式
				}, 500); // 持续时间，可根据需要调整
			}
		},
		gotoDetail(item) {
			uni.navigateTo({
				url: `/subpkg/product-info/product-info?productId=${item.productId}`
			});
		},
	}
};
</script>
<style lang="scss">
.container {
	padding: 5px 10px;
}

.search-bar {
	display: flex;
	align-items: center;
	width: 100%;
}

.search-bar input {
	flex: 1;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.search-bar button {
	padding: 0 20px;
	background-color: #80b3ff;
	color: white;
	font-size: 15px;
	border-radius: 20px;
	margin-left: 10px;
	transition: background-color 0.3s; // 添加过渡效果
}

.search-bar button.active {
	background-color: #5a98ff; // 点击时的背景色变化
}

.results {
	margin-top: 20px;
}

.cate-lv2 {
	background: #fff;
	display: flex;
	border-bottom: 1px solid #ccc;
	padding: 10px;

	.cont {
		display: flex;
		align-items: center;

		.img {
			width: 80px;
			.left {
				width: 100%;
				height: 80px;
				object-fit: cover; // 保持图片比例
			}
		}

		.right {
			margin-left: 10px;
			flex: 1;

			.right1 {
				font-size: 12px;
			}

			.right2 {
				color: #D81E06;
				font-size: 15px;
				margin-top: 5px;
			}
		}
	}
}

.no-results {
	margin-top: 20px;
	color: #999;
}
</style>